<template>
	<el-main>
		<el-card shadow="never">
			<div class="container">
				<div class="avatar">
					<img v-if="detail.gender == '2'" src="https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/1.png"
						alt="女" width="150" height="150">
					<img v-else src="https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/2.png" alt="男" width="150"
						height="150">
				</div>
				<el-form inline style="flex: 1;" label-width="100">
					<el-form-item label="姓名" class="item">
						<el-text>{{ detail.name }}</el-text>
					</el-form-item>
					<el-form-item label="性别" class="item">
						<el-text>{{ gender }}</el-text>
					</el-form-item>
					<el-form-item label="手机" class="item">
						<el-text>{{ detail.mobile }}</el-text>
					</el-form-item>
					<el-form-item label="微信" class="item">
						<el-text>{{ detail.wechat }}</el-text>
					</el-form-item>
					<el-form-item label="地区" class="item">
						<el-text class="region"
							:title="`${detail.provinceName}-${detail.cityName}-${detail.countyName}`">
							{{ detail.provinceName }}-{{ detail.cityName }}-{{ detail.countyName }}
						</el-text>
					</el-form-item>
					<el-form-item label="成交状态" class="item">
						<el-tag v-if="detail.dealStatus">
							{{ dicts.recruit_dealStatus.find(v => v.v == detail.dealStatus.toString())?.k }}
						</el-tag>
						<el-tag v-else>
							{{ dicts.recruit_dealStatus.find(v => v.v == detail.dealStatus.toString())?.k }}
						</el-tag>
					</el-form-item>
					<el-form-item label="意向课程" class="item">
						<el-tag>{{ subjectName }}</el-tag>
					</el-form-item>
					<el-form-item label="意向班级" class="item">
						<el-tag>{{ className }}</el-tag>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card shadow="never" style="margin-top: 10px;">
			<el-tabs type="border-card">
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							沟通互动
						</div>
					</template>
					<follow></follow>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							订单
						</div>
					</template>
					<order></order>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							课程
						</div>
					</template>
					<lesson></lesson>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							课程表
						</div>
					</template>
					<timetable></timetable>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							上课记录
						</div>
					</template>
					<classRecords></classRecords>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							成绩
						</div>
					</template>
					<grad></grad>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							文件夹
						</div>
					</template>
					<folder></folder>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<div class="custom-tabs-label">
							操作日志
						</div>
					</template>
					<log></log>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>
</template>

<script setup lang="ts">
import { getClassGetApi } from '@renderer/api/class';
import { getConsultDetailApi } from '@renderer/api/recruit';
import { getSubjectGetApi } from '@renderer/api/subject';
import { useDicts } from '@renderer/composables/dicts';
import { RecruitItem } from '@renderer/interface/recruit';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import follow from './components/follow.vue';

/* 身份信息 */
const route = useRoute()
const detail = ref<RecruitItem>({
	id: '',
	name: '',
	namePinyin: '',
	nameAbbr: '',
	mobile: '',
	wechat: '',
	source: '',
	purpose: '',
	purposeCourseIds: '',
	purposeClassIds: '',
	level: '',
	dealStatus: 0,
	dealTime: '',
	gender: '',
	education: '',
	province: '',
	city: '',
	county: '',
	age: 0,
	school: '',
	major: '',
	enabled: 0,
	remark: '',
	createBy: null,
	createTime: 0,
	createUnits: '',
	updateBy: null,
	updateTime: null,
	collectBy: '',
	collectTime: 0,
	whrId: '',
	whrName: '',
	collectName: null,
	channelName: '',
	provinceName: '',
	cityName: '',
	countyName: '',
	followMethod: '',
	followTime: 0,
	followContent: '',
	followNextTime: 0,
	roles: null,
	classes: null,
	subjects: null
})
const className = ref('')
const subjectName = ref('')
const getConsultDetailData = async () => {
	const { code, data } = await getConsultDetailApi((route.query.id || localStorage.getItem('clientDetail')) as string)
	if (code !== '200') return

	detail.value = data
	getClassName(data.purposeClassIds)
	getSubjectName(data.purposeCourseIds)
}
const { dicts } = useDicts(['recruit_dealStatus', 'system_global_gender'])
const getClassName = async (id: string) => {
	const { code, data } = await getClassGetApi(id)
	if (code !== '200') return

	className.value = data.className
}
const getSubjectName = async (id: string) => {
	const { code, data } = await getSubjectGetApi(id)
	if (code !== '200') return

	subjectName.value = data.subjectName
}
// 计算性别
const gender = computed(() => {
	return dicts.value.system_global_gender.find(item => item.v == detail.value.gender)?.k
})

onMounted(() => {
	// 如果有则存储用户id
	route.query.id && localStorage.setItem('clientDetail', route.query.id as string)
	getConsultDetailData()
})
</script>

<style scoped lang="scss">
.container {
	display: flex;

	.item {
		width: 40%;
		height: 20px;
		align-items: center;
	}
}

.custom-tabs-label {
	min-width: 60px;
	margin: 0 10px;
	text-align: center;
}

.region {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>